<template>
  <div class="main" :class="{active:isActive}">
    <div class="title">
      <div class="language">
        <el-select v-model="firstLanguage" size="large" style="width: 80px" class="sel" @change="translate(false)">
          <el-row class="options">
            <el-col>
              <el-option v-for="item in transType" :key="item.value" :label="item.label" :value="item.value" />
            </el-col>
          </el-row>
          
        </el-select>
        <svg style="margin:0 5px 0" t="1710310716545" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="6060" width="20" height="20">
          <path d="M871.24 443.3H120.56a32 32 0 0 1 0-64h750.68a32 32 0 0 1 0 64z" p-id="6061"></path>
          <path
            d="M875.42 443.3a31.86 31.86 0 0 1-21.24-8L627.72 234a32 32 0 1 1 42.52-48l226.46 201.38a32 32 0 0 1-21.28 56zM875.44 646.7H124.76a32 32 0 1 1 0-64h750.68a32 32 0 0 1 0 64z"
            p-id="6062"></path>
          <path
            d="M347.02 848a31.88 31.88 0 0 1-21.26-8L99.3 638.62a32 32 0 1 1 42.52-47.84L368.28 792a32 32 0 0 1-21.26 56z"
            p-id="6063"></path>
        </svg>
        <el-select v-model="secondLanguage" size="large" style="width: 80px" @change="translate(true)">
          <el-row class="options">
            <el-col>
              <el-option v-for="item in transType" :key="item.value" :label="item.label" :value="item.value" />
            </el-col>
          </el-row>
        </el-select>
      </div>
      <div class="source">
        <el-select v-model="transSource" size="large" style="width: 80px" @change="translate(true)">
          <el-option v-for="item in transSupport" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="transInput">
      <el-input type="textarea" autosize v-model="firstContent" @input="begin(true)" :placeholder="place1" resize="none"
        @focus="getInputFocus($event)"></el-input>
      <el-input type="textarea" autosize v-model="secondContent" @input="begin(false)" :placeholder="place2"
        resize="none" @focus="getInputFocus($event)"></el-input>
    </div>

  </div>
</template>



<script setup>
import { ref, onMounted, computed } from "vue";
import * as MD5 from '@/utils/md5.js'
import fetchJSONP from 'fetch-jsonp'

const isActive=ref(false)

const myId = '20240310001989363'
const translateKey = 'MdAIOvJ2Gs7CvllGrT53'
const firstContent = ref('')
const secondContent = ref('')
const firstLanguage = ref('en')
const secondLanguage = ref('zh')
const transType = [{
  label: '中文',
  value: 'zh'
}, {
  label: '英文',
  value: 'en'
}, {
  label: '日语',
  value: 'jp'
}, {
  label: '韩语',
  value: 'kor'
}, {
  label: '法语',
  value: 'fra'
},{
  label: '俄语',
  value: 'ru'
}, {
  label: '繁体',
  value: 'cht'
},{
  label: '文言文',
  value: 'wyw'
},{
  label: '西班牙语',
  value: 'spa'
}]

const transSource = ref('baidu')
const transSupport = [{
  label: '百度',
  value: 'baidu'
}]

let timer = null
let input1Disabled = false
let input2Disabled = false

function begin(isInput1) {
  if (isInput1) {
    if (input1Disabled) return
    input2Disabled = true
  } else {
    if (input2Disabled) return
    input1Disabled = true
  }
  if (timer != null) {
    clearTimeout(timer)
  }
  timer = setTimeout(translate, 500, isInput1)
}

function translate(isInput1) {
  let src = firstContent
  let dst = secondContent
  let srcl = firstLanguage
  let dstl = secondLanguage
  if (isInput1) {
    if (firstContent.value == '') {
      secondContent.value = ''
      transEnd()
      return
    }
  } else {
    if (secondContent.value == '') {
      firstContent.value = ''
      transEnd()
      return
    }
    src = secondContent
    dst = firstContent
    srcl = secondLanguage
    dstl = firstLanguage
  }
  let str = src.value
  str = str.replace(/[\r\n]/g, "")
  const random = parseInt(Math.random() * 10000000000)
  const sign = MD5.MD5(`${myId}${str}${random}${translateKey}`)
  const url = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${str}&from=${srcl.value}&to=${dstl.value}&appid=${myId}&salt=${random}&sign=${sign}`
  fetchJSONP(url)
    .then(response => response.json())
    .then(data => {
      dst.value = data.trans_result[0].dst
      transEnd()
    })
}
function transEnd(){
  input1Disabled = false
  input2Disabled = false
  timer = null
  isActive.value = !isActive.value
}

function getInputFocus(e) {
  e.currentTarget.select();
}

const place1 = computed(() => {
  let lan = transType.find(item => item.value == firstLanguage.value)
  return lan.label
})
const place2 = computed(() => {
  let lan = transType.find(item => item.value == secondLanguage.value)
  return lan.label
})

onMounted(() => {
  // const clipPromise = navigator.clipboard.readText();
  // clipPromise.then(function (clipText) {
  //   console.log(clipText);
  //   firstContent.value = clipText
  // });
})
</script>
<style scoped>
.main {
  width: calc(100vw - 30px);
  padding: 10px;
  border-radius: 10px;
}

.title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.language {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.transInput {
  display: flex;
  flex-direction: column;
}

.el-textarea {
  width: 100%;
  margin-bottom: 10px;
}

.sel {
  border: none;
}

.language {
  :deep(.el-select__wrapper) {
    box-shadow: none;
  }
}
.source {
  :deep(.el-select__wrapper) {
    box-shadow: none;
  }
}
.options{
  height: 130px;
}
</style>